<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>51预定管理后台 V0.1</title>
    <link rel="stylesheet" type="text/css" href="${base}/resources/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="${base}/resources/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${base}/resources/demo.css">
    <script type="text/javascript" src="${base}/resources/jquery.min.js"></script>
    <script type="text/javascript" src="${base}/resources/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${base}/resources/locale/easyui-lang-zh_CN.js"></script>
    <style type="text/css">
        body, html {
            height: 100%;
            width: 100%;
            padding: 0px;
            margin: 0px;
        }

        .fm {
            margin: auto;
            padding-left: 6px;
            padding-right: 6px;
            text-align: center
        }

        .fm table {
            border: 1px solid #8DB6CD;
            width: 100%;
            margin-top: 7px;
        }

        .fm table th {
            font-weight: normal;
            text-align: right;
        }
    </style>
    <script type="text/javascript">
        var parentId = 0;
        $(function () {
            $('#tt').tree({
                url: '${base}/management/module/tree',
                method: "POST",
                onClick: function (node) {
                    $('#dg').datagrid({
                        url: '${base}/management/module/list/' + node.id
                    });
                    parentId = node.id;
                }
            });
        });
        function add() {
            $("#type").val("add");
            $("#parentId").val(parentId);
            $("#dl").dialog("open");
        }
        function cancel() {
            $("#dl").dialog("close");
        }
        function save() {
            $("#fm").form('submit', {
                url: '${base}/management/module/save',
                onSubmit: function () {
                    return true;
                },
                success: function (data) {
                    var obj = eval('(' + data + ')');
                    if (obj.statusCode = '200') {
                        $("#dl").dialog("close");
                        $("#fm").form('clear');
                        $("#dg").datagrid('reload');
                    }
                    $.messager.show({
                        title: '提示',
                        msg: obj.message
                    });
                }
            });
        }
        function reload() {
            $("#dg").datagrid('reload');
        }
        function remove() {
            var row = $("#dg").datagrid('getSelected');
            if (row) {
                $.messager.confirm('确定删除该目录吗?',row.moduleName,function(r){
                    if (r) {
                        $.ajax({
                            url:"${base}/management/module/remove/"+row.id,
                            type:"post",
                            async:false,
                            dataType:"json",
                            success:function(data){
                                showMsg(data.message);
                                $("#dg").datagrid('reload');
                            },
                            error:function () {
                                showMsg("未连接服务器");
                            }
                        });
                    }else{
                        return;
                    }
                });
            }else{
                showMsg("请选择要删除的模块");
            }
        }
        function showMsg(message){
            $.messager.show({
                title: '提示',
                msg: message
            });
        }
        function edit() {
            var row = $("#dg").datagrid('getSelected');
            if (row) {
                $("#type").val("mod");
                $("#parentId").val(row.parentId);
                $("#moduleName").textbox("setValue",row.moduleName);
                $("#seq").textbox("setValue",row.seq);
                $("#linkPage").textbox("setValue",row.linkPage);
                $("#dl").dialog("open");
                $("#id").val(row.id);
                $("#isShow").combobox(row.isShow);

            }else{
                showMsg("请选择要修改的模块");
            }
        }
        function showFormatter(value){
            if (value == '1'){
                return "<span style='color:green'>是</span>";
            } else if (value == '2'){
                return "<span style='color:red'>否</span>";
            } else {
                return "<span style='color:yellow'>未知</span>";
            }
        }
    </script>
</head>
<body class="easyui-layout">
<div id="west" data-options="region:'west',split:true,title:'模块结构树'" style="width:135px;overflow: hidden">
    <ul id="tt" class="easyui-tree">
    </ul>
</div>
<div data-options="region:'center'" style="border: 0px solid black !important;">
    <table id="dg" class="easyui-datagrid" style="width: 100%;height: 100%;"
           data-options="idField:'id',toolbar:'#btns',url:'${base}/management/module/list/0',fitColumns:true,singleSelect:true"
           fit="true"
           remoteSort="false"
           rownumbers="true" showHeader="true">
        <thead>
        <tr>
            <th data-options="field:'id'" hidden>Id</th>
            <th data-options="field:'parentId'" align="center" hidden></th>
            <th data-options="field:'moduleName'" align="center" width="100">模块名称</th>
            <th data-options="field:'linkPage'" align="center" width="100">链接地址</th>
            <th data-options="field:'seq'" align="center" width="100" sortable="true">排序</th>
            <th data-options="field:'isShow'" align="center" width="100" formatter="showFormatter">是否显示</th>
        </tr>
        </thead>
    </table>
</div>
<div id="btns">
    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="add()">添加</a>
    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"
       onclick="remove()">删除</a>
    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="edit()">修改</a>
    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true"
       onclick="reload()">刷新</a>
</div>
<!--新增或修改-->
<div id="dl" class="easyui-dialog" data-options="buttons:'#btns1',title:'新增模块',modal:true,closed:true"
     style="width: 300px;height: 260px">
    <form id="fm" class="fm" method="post">
        <input id="type" name="type" type="hidden">
        <input id="parentId" name="parentId" type="hidden">
        <input id="id" name="id" type="hidden">
        <table>
            <tr>
                <th>模块名称:</th>
                <td><input id="moduleName" name="moduleName" class="easyui-textbox" data-options="required:true"></td>
            </tr>
        </table>
        <table>
            <tr>
                <th>链接地址:</th>
                <td><input id="linkPage" name="linkPage" class="easyui-textbox" data-options="required:true"></td>
            </tr>
        </table>
        <table>
            <tr>
                <th>排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序:</th>
                <td><input id="seq" name="seq" class="easyui-numberbox" data-options="min:1" data-options="required:true"
                           value="1"></td>
            </tr>
        </table>
        <table>
            <tr>
                <th>是否显示:</th>
                <td><select id="isShow" name="isShow" class="easyui-combobox" data-options="required:true,min:1,editable:false"
                            style="width: 150px">
                    <option value="1" selected>是</option>
                    <option value="2">否</option>
                </select>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="btns1">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="save()">保存</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="cancel()">取消</a>
</div>
</body>
</html>